<template>

  <div class="box" ref="targetElement">
    <div class="search-box" ref="searchBox">
      <div class="search-top-box">
        <div class="search-top-left-box">
          <el-form ref="div" :inline="true" label-width="110px" :model="searchForm" @submit.native.prevent
            class="demo-form-inline">
            <el-form-item label="客户姓名">
              <el-input @change="onSearch(1)" clearable class="form-width" v-model="searchForm.name"
                placeholder="输入客户姓名"></el-input>
            </el-form-item>
            <el-form-item label="客户类型">
              <el-select filterable @change="onSearch(1)" v-model="searchForm.customer_type" placeholder="选择客户类型" clearable
                class="form-width">
                <el-option v-for="item in customerTypeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户业务区域">
              <!-- multiple -->
              <el-select filterable collapse-tags @change="businessAreaChange" v-model="searchForm.business_area_id"
                placeholder="选择业务区域" clearable class="form-width">
                <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户编号">
              <el-input @change="onSearch(1)" clearable class="form-width" v-model="searchForm.member_id"
                placeholder="输入客户编号"></el-input>
            </el-form-item>
            <template v-if="moreSearchShow">
              <el-form-item label="年龄">
                <el-input @change="onSearch(1)" clearable class="form-width" v-model="searchForm.customer_age"
                  placeholder="输入年龄"></el-input>
              </el-form-item>
              <el-form-item label="性别：">
                <el-select filterable v-model="searchForm.customer_sex" placeholder="选择性别" clearable class="form-width">
                  <el-option v-for="item in customerSexList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="客户身份">
                <el-select filterable v-model="searchForm.customer_identity" placeholder="选择客户身份" clearable class="form-width">
                  <el-option v-for="item in identityList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="对客关注度">
                <el-select filterable v-model="searchForm.customer_attention" placeholder="选择对客关注度" clearable class="form-width">
                  <el-option v-for="item in attentionList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="年度开店计划">
                <el-select filterable v-model="searchForm.annual_store_opening_plan" placeholder="选择年度开店计划" clearable
                  class="form-width">
                  <el-option v-for="item in annualStoreOpeningPlan" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="投资能力">
                <el-select filterable v-model="searchForm.investment_capability" placeholder="选择投资能力" clearable class="form-width">
                  <el-option v-for="item in investmentCapabilityList" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="联系人姓名">
                <el-input v-input-limit="0" maxlength="11" @change="onSearch(1)" clearable class="form-width"
                  v-model="searchForm.contacts" placeholder="输入联系人姓名"></el-input>
              </el-form-item>
            </template>
          </el-form>
        </div>
        <div class="search-top-right-box">
          <p @click="moreSearchFunc">
            {{ moreSearchShow ? "收起" : "展开"
            }}<i :class="moreSearchShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "></i>
          </p>
          <el-button type="primary" @click="onSearch(1)">查询</el-button>
          <el-button type="primary" @click="addUserModel" v-if="$isPer(permission, ['user_addUser'])">添加客户</el-button>
        </div>
      </div>
    </div>

    <!-- 列表 -->
    <div class="page-list" ref="pageList" v-loading="loading">
      <div class="list-top-box">
        <p class="list-top-box-left">
          已选<span class="num">{{ multipleSelection.length }}</span>/{{ tableData.length }}数据
        </p>
        <div class="list-top-box-right">
          <el-button type="primary" @click="exportVisible = true" :disabled="tableData.length == 0"
            v-if="$isPer(permission, ['user_exportUserExcel'])">导出客户列表</el-button>
          <el-button type="primary" :disabled="multipleSelection.length != 1"
            @click="editEven(multipleSelection[0], 'upadteUser')"
            v-if="$isPer(permission, ['user_editMsg'])">编辑</el-button>
          <el-button type="danger" plain :disabled="multipleSelection.length == 0"
            @click="editEven(multipleSelection[0], 'delUser')" v-if="$isPer(permission, ['user_del'])">删除</el-button>
        </div>
      </div>
      <!-- stripe -->
      <div class="table-box">
        <el-table border ref="table" @row-click="handleHighlightChangeTable" highlight-selection-row height="100%"
          :data="tableData" style="width: 100%" :header-cell-style="{
            background: '#FAFBFC',
            color: '#828A9D',
            textAlign: 'center',
          }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="80"></el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_tx')" prop="" label="头像" width="80px">
            <template slot-scope="scope">
              <img class="avatar-itme" :src="scope.row.image" />
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_hybh')" min-width="110px" prop="member_id" label="会员编号"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button @click.stop="editEven(scope.row, 'userDetail')" type="text">{{
                scope.row.member_id || '--' }}</el-button>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_khxm')" min-width="120px" prop="name" label="客户姓名"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_lxfs')" min-width="130px" prop="phone" label="联系方式"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_nl')" min-width="100px" show-overflow-tooltip prop="customer_age"
            label="年龄">
            <template slot-scope="scope">
              <span>{{ scope.row.customer_age || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_xb')" min-width="80px" show-overflow-tooltip prop="updated_at"
            label="性别">
            <template slot-scope="scope">
              {{ scope.row.customer_sex == 1 ? '男' : '女' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_khsf')" min-width="100px" show-overflow-tooltip prop="updated_at"
            label="客户身份">
            <template slot-scope="scope">
              <span v-if="scope.row.customer_identity == 1">老板</span>
              <span v-if="scope.row.customer_identity == 2">合伙人</span>
              <span v-if="scope.row.customer_identity == 3">项目负责人</span>
              <span v-if="scope.row.customer_identity == 4">签约人</span>
              <span v-if="!scope.row.customer_identity">--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_khlx')" min-width="110px" show-overflow-tooltip prop="customer_type"
            label="客户类型">
            <template slot-scope="scope">
              <span v-if="scope.row.customer_type == 1">VIP客户</span>
              <span v-if="scope.row.customer_type == 2">优质客户</span>
              <span v-if="scope.row.customer_type == 3">普通老客户</span>
              <span v-if="scope.row.customer_type == 4">优质新客户</span>
              <span v-if="scope.row.customer_type == 5">普通新客户</span>
              <span v-if="!scope.row.customer_type">--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_khywqy')" min-width="120px" show-overflow-tooltip
            prop="business_area" label="客户业务区域">
            <template slot-scope="scope">
              {{ scope.row.business_area || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_dkgzd')" min-width="130px" show-overflow-tooltip
            prop="customer_attention" label="对客关注度">
            <template slot-scope="scope">
              <span v-if="scope.row.customer_attention == 1">持续重点关注</span>
              <span v-if="scope.row.customer_attention == 2">持续关注</span>
              <span v-if="scope.row.customer_attention == 3">定期关注</span>
              <span v-if="scope.row.customer_attention == 4">不定期关注</span>
              <span v-if="scope.row.customer_attention == 5">一般关注</span>
              <span v-if="!scope.row.customer_attention">--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_mqjypp')" min-width="100px" show-overflow-tooltip
            prop="current_operating_brand" label="目前经营品牌">
            <template slot-scope="scope">
              {{ scope.row.current_operating_brand || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_cshgx')" min-width="130px" show-overflow-tooltip
            prop="secondary_social_relations" label="次社会关系">
            <template slot-scope="scope">
              <span v-if="scope.row.secondary_social_relations == 1">品牌方关系户</span>
              <span v-if="scope.row.secondary_social_relations == 2">我司关系户</span>
              <span v-if="scope.row.secondary_social_relations == 3">政府关系户</span>
              <span v-if="scope.row.secondary_social_relations == 4">一般关系</span>
              <span v-if="!scope.row.secondary_social_relations">--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_khtd')" min-width="100px" show-overflow-tooltip
            prop="customer_attitude" label="客户态度">
            <template slot-scope="scope">
              <span v-if="scope.row.customer_attitude == 1">积极主动</span>
              <span v-if="scope.row.customer_attitude == 2">沟通顺畅</span>
              <span v-if="scope.row.customer_attitude == 3">敷衍了事</span>
              <span v-if="scope.row.customer_attitude == 4">拒不配合</span>
              <span v-if="!scope.row.customer_attitude">--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_ndkdjh')" min-width="150px" show-overflow-tooltip
            prop="annual_store_opening_plan" label="年度开店计划">
            <template slot-scope="scope">
              <span v-if="scope.row.annual_store_opening_plan == 1">不连续且少量开店</span>
              <span v-if="scope.row.annual_store_opening_plan == 2">不连续且大量开店</span>
              <span v-if="scope.row.annual_store_opening_plan == 3">持续且少量开店</span>
              <span v-if="scope.row.annual_store_opening_plan == 4">持续且大量开店</span>
              <span v-if="!scope.row.annual_store_opening_plan">--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_tznl')" min-width="100px" show-overflow-tooltip
            prop="investment_capability" label="投资能力">
            <template slot-scope="scope">
              <span v-if="scope.row.investment_capability == 1">100w以下</span>
              <span v-if="scope.row.investment_capability == 2">100-500w</span>
              <span v-if="scope.row.investment_capability == 3">500-1000w</span>
              <span v-if="scope.row.investment_capability == 4">1000w以上</span>
              <span v-if="!scope.row.investment_capability">--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('kh_qdly')" min-width="100px" show-overflow-tooltip prop="source"
            label="渠道来源">
            <template slot-scope="scope">
              <span v-if="scope.row.source == 1">品牌客户</span>
              <span v-if="scope.row.source == 2">电销</span>
              <span v-if="scope.row.source == 3">展会</span>
              <span v-if="scope.row.source == 4">转介绍</span>
              <span v-if="scope.row.source == 5">其他</span>
              <span v-if="!scope.row.source">--</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="page-footer">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-size="num"
          :current-page.sync="page" :total="total" @current-change="pageChange" @size-change="handleSizeChange">
        </el-pagination>
      </div>
    </div>

    <!-- 导出用户列表 -->
    <el-dialog :modal-append-to-body="false" title="导出用户字段选择" :visible.sync="exportVisible" width="680px"
      :before-close="exportCloseFunc">
      <el-checkbox class="checkbox-item" v-model="allChecked" @change="allCheckedChangeFunc">全选</el-checkbox>
      <div v-loading="exportLoading">
        <div class="export-scroll">
          <el-checkbox-group v-model="exportrVal">
            <el-checkbox class="checkbox-item" v-for="(item, index) in exportArr" :key="index" :label="item.label"
              border></el-checkbox>
          </el-checkbox-group>
        </div>
        <p v-if="exportUrl">导出文件链接：<el-button @click="$openUrlFunc(exportUrl[0])" type="text">{{
          exportUrl[1]
            }}</el-button></p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportSubmitFunc">提交</el-button>
        <el-button @click="exportCloseFunc">关闭</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import store from "@/store";
import commonApi from "@/api/common";
import adminApi from "@/api/adminApi";
import { userFieldArr } from '@/utils/exportField'

export default {
  name: "customerManagement",
  data() {
    return {
      // 导出用户列表
      allChecked: false,//是否全选字段
      exportLoading: false,//导出loading
      exportVisible: false,//导出弹窗
      exportUrl: '',//导出url
      exportrVal: [],//导出勾选字段
      exportArr: userFieldArr,//导出字段数组


      permission: [],
      customerTypeList: [
        {
          label: "VIP客户",
          value: 1,
        },
        {
          label: "优质客户",
          value: 2,
        },
        {
          label: "普通老客户",
          value: 3,
        },
        {
          label: "优质新客户",
          value: 4,
        },
        {
          label: "普通新客户",
          value: 5,
        },
      ],//客户类型
      customerSexList: [
        {
          label: "男",
          value: 1,
        },
        {
          label: "女",
          value: 2,
        },
      ],//客户性别
      identityList: [
        {
          label: "老板",
          value: 1,
        },
        {
          label: "合伙人",
          value: 2,
        },
        {
          label: "项目负责人",
          value: 3,
        },
        {
          label: "签约人",
          value: 4,
        },
      ],//客户身份
      attentionList: [
        {
          label: "持续重点关注",
          value: 1,
        },
        {
          label: "持续关注",
          value: 2,
        },
        {
          label: "定期关注",
          value: 3,
        },
        {
          label: "不定期关注",
          value: 4,
        },
        {
          label: "一般关注",
          value: 5,
        },
      ],//客户关注度
      annualStoreOpeningPlan: [
        {
          label: "不连续且少量开店",
          value: 1,
        },
        {
          label: "不连续且大量开店",
          value: 2,
        },
        {
          label: "持续且少量开店",
          value: 3,
        },
        {
          label: "持续且大量开店",
          value: 4,
        },
      ],//年度开店计划
      investmentCapabilityList: [
        {
          label: "100w以下",
          value: 1,
        },
        {
          label: "100-500w",
          value: 2,
        },
        {
          label: "500-1000w",
          value: 3,
        },
        {
          label: "1000w以上",
          value: 4,
        },
      ],//投资能力
      moreSearchShow: false,
      // 查询数据'
      searchForm: {
        member_id: '',
        name: '',
        customer_age: '',
        customer_sex: '',
        customer_identity: '',
        customer_type: '',
        customer_attention: '',
        annual_store_opening_plan: '',
        investment_capability: '',
        business_area_id: '',
        business_area: ''

      },
      projectSearchState: false,
      multipleSelection: [], //已选择数据
      cityList: [],//省市区数据
      tableData: [],//列表数据
      page: 1,//页码
      num: 10,//条数
      total: 0,//列表数据总数
      loading: false,//页面加载loading
    };
  },
  activated() {
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.handleResize);
    this.onSearch();
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
    // 移除窗口大小变化事件监听器，防止内存泄漏
    if (this.resizeObserver) {
      // 停止观察目标元素，防止内存泄漏
      this.resizeObserver.disconnect();
    }
  },
  deactivated() {
    window.removeEventListener('resize', this.handleResize);
    // 移除窗口大小变化事件监听器，防止内存泄漏
    if (this.resizeObserver) {
      // 停止观察目标元素，防止内存泄漏
      this.resizeObserver.disconnect();
    }
  },
  mounted() {
    this.handleResize();
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.handleResize);
    // 操作权限
    this.$getHtmlAuthority(this.$route.path).then(res => {
      console.log(res, "getHtmlAuthority");
      this.permission = res.data.permission;
    })
    this.getUserList();
    this.getAreaList();
  },
  methods: {
    handleResize() {
      const target = this.$refs.targetElement;
      const searchBox = this.$refs.searchBox;
      const pageList = this.$refs.pageList;
      // 创建 ResizeObserver 实例
      const resizeObserver = new ResizeObserver(entries => {
        setTimeout(() => {
          console.log('元素变为:', searchBox.offsetHeight);
          // searchBox.offsetHeight + 'px'
          pageList.style.height = 'calc(100% - ' + (searchBox.offsetHeight + 15) + 'px)';
        }, 0);
      });
      // 开始观察目标元素
      resizeObserver.observe(target);

      // 存储 resizeObserver 实例，以便在组件销毁时停止观察
      this.resizeObserver = resizeObserver;
    },
    // 导出列表确认
    exportSubmitFunc() {
      let exportrVal = this.exportrVal;//已勾选
      let exportArr = this.exportArr;//所有字段
      let searchForm = this.searchForm;//列表筛选项
      if (!exportrVal.length) {
        this.$message({
          type: 'warning',
          message: "请勾选需要导出的字段"
        })
        return;
      }
      let field_list = [];//提交列表
      exportrVal.forEach(item => {
        let index = exportArr.findIndex(child => {
          return item == child.label;
        })
        if (index != -1) {
          field_list.push(exportArr[index].value);
        }
      })
      this.exportUserExcel({
        field_list,

        member_id: searchForm.member_id || '',
        name: searchForm.name || '',
        customer_age: searchForm.customer_age || '',
        phone: searchForm.phone || '',
        customer_identity: searchForm.customer_identity || '',
        business_area_id: searchForm.business_area_id || '',
        customer_attention: searchForm.customer_attention || '',
        annual_store_opening_plan: searchForm.annual_store_opening_plan || '',
        investment_capability: searchForm.investment_capability || '',
        customer_type: searchForm.customer_type
      })
    },
    exportUserExcel(obj) {
      this.exportLoading = true;
      adminApi.exportUserExcel(obj).then(res => {
        console.log(res, "导出客户列表")
        this.exportLoading = false;
        if (res.code == 200) {
          this.exportUrl = res.data;
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 导出字段全选
    allCheckedChangeFunc(e) {
      let exportrVal = [];
      let exportArr = this.exportArr;
      if (e) {
        exportArr.forEach(item => {
          exportrVal.push(item.label);
        })
        this.exportrVal = exportrVal//已选择字段
      } else {
        this.exportrVal = exportrVal//已选择字段
      }
    },
    // 关闭导出弹窗
    exportCloseFunc() {
      this.exportVisible = false;
      this.allChecked = false;
      this.exportrVal = [];
      this.exportUrl = '';
    },
    // table单行点击
    handleHighlightChangeTable(row) {
      if (!row.disabled) {
        this.$refs.table.toggleRowSelection(row);
      }
    },
    // 搜索框宽度计算
    moreSearchFunc() {
      this.moreSearchShow = !this.moreSearchShow;
      this.$nextTick(() => {
        this.handleResize();
      })
    },
    // 业务区域选择
    businessAreaChange(e) {
      let searchForm = this.searchForm;
      if (!searchForm.business_area_id) return;
      searchForm.business_area = '';
      let cityList = this.cityList;
      let index = cityList.findIndex((item) => {
        return item.id == searchForm.business_area_id;
      });
      searchForm.business_area = cityList[index].name;
      this.searchForm = searchForm;
    },
    // 省市区
    getAreaList() {
      commonApi.getAreaList().then((res) => {
        console.log(res, "省市区");
        if (res.code == 200) {
          this.cityList = res.data;
        }
      });
    },
    // 客户列表
    getUserList() {
      let that = this;
      let searchForm = that.searchForm;
      that.loading = true;
      let obj = {
        page: this.page,
        num: this.num,
        member_id: searchForm.member_id || '',
        name: searchForm.name || '',
        customer_age: searchForm.customer_age || '',
        phone: searchForm.phone || '',
        customer_identity: searchForm.customer_identity || '',
        business_area_id: searchForm.business_area_id || '',
        customer_attention: searchForm.customer_attention || '',
        annual_store_opening_plan: searchForm.annual_store_opening_plan || '',
        investment_capability: searchForm.investment_capability || '',
        contacts: searchForm.contacts,
        customer_type: searchForm.customer_type
      }
      if (searchForm.customer_sex) {
        obj.customer_sex = searchForm.customer_sex;
      }
      adminApi
        .getUserList(obj)
        .then((res) => {
          console.log(res, "用户列表");
          that.loading = false;
          if (res.code == 200) {
            that.tableData = res.data.list;
            that.total = res.data.max;
          } else {
            if (res.message == "暂无数据") {
              if (that.page == 1) {
                that.tableData = [];
              }
              return;
            }
            that.$message({
              message: res.message,
              type: "warning",
            });
            that.tableData = [];
            that.total = 0;
          }
        })
        .catch((err) => {
          that.loading = false;
          that.$message({
            message: err.message,
            type: "warning",
          });
        });
    },
    // table选择事件
    handleSelectionChange(e) {
      console.log(e);
      this.multipleSelection = e;
    },
    // 分页
    pageChange(page) {
      this.onSearch(page);
    },
    // 页数改变
    handleSizeChange(e) {
      this.num = e;
      this.onSearch(1);
    },
    // 添加用户按钮
    addUserModel() {
      let that = this;
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: "/addCustomerPage",
        // query: { id: row.id },
      });
    },
    // 按钮操作
    editEven(row, type) {
      let multipleSelection = this.multipleSelection;
      console.log(multipleSelection)
      switch (type) {
        case "userDetail":
          this.$store.commit('isEventTriggeredFunc', true);
          this.$router.push({
            path: "/customerDetailNewPage",
            query: {
              id: row.id
            }
          })
          break;
        case "upadteUser":
          this.$store.commit('isEventTriggeredFunc', true);
          this.$router.push({
            path: "/addCustomerPage",
            query: { id: row.id, route_title: '编辑客户' },
          });
          break;
        case "delUser":
          this.delCustomer();
          break;
        case "project": //跳去项目列表
          let projectSearchState = this.projectSearchState;
          if (projectSearchState == 1) {
            this.$store.commit('isEventTriggeredFunc', true);
            this.$router.push({
              path: "/project/salesManagement",
              query: { id: row.id },
            });
          }
          if (projectSearchState == 2) {
            this.$store.commit('isEventTriggeredFunc', true);
            this.$router.push({
              path: "/project/constructionManagement",
              query: { id: row.id },
            });
          }
          break;
        default:
      }
    },
    // 删除客户
    delCustomer() {
      let multipleSelection = this.multipleSelection;
      console.log(multipleSelection)
      let id_arr = [];
      multipleSelection.forEach(item => {
        id_arr.push(item.id)
      })
      this.$confirm('是否删除已选中用户?', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        adminApi
          .delUser({
            id_arr,
          })
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.onSearch();
            } else {
              this.$message.error(res.message);
            }
          });
      });
    },
    // 搜索
    onSearch(page) {
      console.log(this.searchForm)
      this.page = typeof page == 'number' ? page : this.page;
      this.getUserList();
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/styles/listPage.scss';

.avatar-itme {
  width: 30px;
  height: 30px;
  border-radius: 20px;
  margin-right: 10px;
  object-fit: cover;
}
</style>
